<template>
    <div class="box">
        <el-card class="loginCard">
            <div class="title">登录页面</div>
            <el-form>
                <el-form-item label="账号" >
                    <el-input type="text" v-model="username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password"  v-model="password"></el-input>
                </el-form-item>
                <el-form-item  class="loginBox">
                    <el-button  type="primary" class="loginBtn" @click="loginUser">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import {reqUserLogin} from '../../api'
export default {
    data() {
        return {
            username:'',
            password:''
        }
    },
    methods: {
        async loginUser(){
            let {username,password} = this
            let data = new URLSearchParams()
            data.append('username',username)
            data.append('password',password)
            let result = await reqUserLogin(data)
            if(result.code != 200) return this.$message({type:'error',message:"登录失败"})
            let {user,token} = result.data
            window.sessionStorage.setItem('token',token) 
            window.sessionStorage.setItem('user',JSON.stringify(user))
            if(result.data.user.role == 'admin'){
                this.$router.push('/main')
                this.$message({type:'success',message:'登录成功'})
            }else{
                this.$router.push('/frontmain')
                this.$message({type:'success',message:`欢迎 ${result.data.user.name} 登录`,offset:70})
            }
            
        }
    },
}
</script>

<style lang="less" scoped>
    .box{
        background-color: cadetblue;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .loginCard{
        width: 30%;
        margin: 0px auto;
        background-color: #f1f1f1;
        .title{
            font-size: 28px;
            font-weight: 800;
            text-align: center;
            color: #111;
            margin-bottom: 20px;
        }
        .el-form{
            .loginBox{
                text-align: center;
                .loginBtn{
                    font-size: 16px;
                    width: 30%;
                }
            }
        }
    }
</style>